<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
		<script src="vue-router.js"></script>
	</head>
	<body>
		<div id="box">
			<router-link to="/login">登录</router-link>
			<router-link to="/register">注册</router-link>
			<div>
				我是根元素内容1
				<router-view></router-view>
				我是根元素内容2
			</div>
		</div>

		<script>
			var Tab1 = {
				template: `<h2>我是Tab1组件</h2>`
			}
			var Tab2 = {
				template: `<h2>我是Tab2组件</h2>`
			}
			var Login = {
				template: `<h2>我是登录组件</h2>`
			}
			var Register = {
				template: `<h2>我是注册组件</h2>`
			}

			var router = new VueRouter({
				routes: [{
						path: '/',
						redirect: '/login'
					},
					{
						path: '/login',
						component: Login
					},
					{
						path: '/register',
						component: Register,
						children: [{
								path: 'tab1',
								component: Tab1
							},
							{
								path: 'tab2',
								component: Tab2
							}
						]
					},
				]
			})
			new Vue({
				el: '#box',
				data: {},
				router
			})
		</script>
	</body>
</html>
